<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="baidu-site-verification" content="code-YfBAOEVVQH" />
    <meta name="keywords" content="李秀涓,博客,生活记录,生活日常,个人简历,日常规划">
    <meta name="description" content="言力所能及之言，做力所能及之事，思力所不及之思。一名正在学习的书法老师。">
    <meta name="author" content="李秀涓">
    
    <title>
        
            网站开始-markdown语法 |
        
        李秀涓|成长笔记
    </title>
    <link rel="stylesheet" href="/css/style.css">
    <link rel="shortcut icon" href="/images/logo.jpg">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"github.com","root":"/","language":"zh-CN","path":"search.xml"};
    KEEP.theme_config = {"toc":{"enable":false,"number":false,"expand_all":false,"init_open":false},"style":{"primary_color":"#0066CC","avatar":"/images/logo.jpg","favicon":"/images/logo.jpg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":true,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"积累硅步，可至千里；千里之行，始于足下"},"scroll":{"progress_bar":{"enable":true},"percent":{"enable":true}}},"local_search":{"enable":true,"preload":true},"code_copy":{"enable":true,"style":"default"},"pjax":{"enable":false},"lazyload":{"enable":true},"version":"3.4.0"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 5.3.0"></head>


<body>
<!--
 * @Description: file content
 * @Author: yuhongshao
 * @Date: 2021-02-20 19:33:18
 * @email: 
 * @LastEditTime: 2022-05-25 12:31:42
-->
<div class="progress-bar-container">
    
        <span class="scroll-progress-bar"></span>
    

    
</div>


<main class="page-container">

  

  <div class="page-main-content">

    <div class="page-main-content-top">
      <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            <a class="logo-title" href="/">
                李秀涓|成长笔记
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                主页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                历年汇总
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于我
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">主页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">历年汇总</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于我</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


    </div>
    <style>
      .main-content a{
        color: #6e9cca;
      }
      .article-title-list {
        position: fixed;
        left: 80px;
        top: 110px;
        z-index: 100;
        width: 300px;
        max-height: calc(100% - 144px);
        overflow: auto;
      }
      .article-title-list a .badge{
        display: inline-block;
        margin-right: 5px;
        padding: 0 5px;
        background-color: #ebebeb;
        border-radius: 3px;
        color: #6b6b6b;
      }
      .article-title-list h1,
      .article-title-list h2,
      .article-title-list h3,
      .article-title-list h4,
      .article-title-list h5,
      .article-title-list h6 {
        box-sizing: border-box;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        color: #686868;
        font-weight: normal;
        line-height: 1;
        cursor: pointer;
      }

      .article-title-list h1 {
        font-size: 22px;
      }

      .article-title-list h2 {
        padding-left: 20px;
        font-size: 20px;
      }

      .article-title-list h3 {
        padding-left: 40px;
        font-size: 18px;
      }

      .article-title-list h4 {
        padding-left: 60px;
        font-size: 16px;
      }

      .article-title-list h5 {
        padding-left: 80px;
        font-size: 14px;
      }

      .article-title-list h6 {
        padding-left: 100px;
        font-size: 12px;
      }

    </style>
    <div class="article-title-list">
    </div>

    <div class="page-main-content-middle">

      <div class="main-content">

        
        <div class="fade-in-down-animation">
  <div class="article-content-container">

    <div class="article-title">
      <span class="title-hover-animation">网站开始-markdown语法</span>
    </div>

    
    <div class="article-header">
      <div class="avatar">
        <img src="/images/logo.jpg">
      </div>
      <div class="info">
        <div class="author">
          <span class="name">李秀涓</span>
          
          <span
            class="author-label">Lv1</span>
          
        </div>
        <div class="meta-info">
          <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;2022-05-08 15:40:06
    </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/markdown/">markdown</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

        </div>
      </div>
    </div>
    

    <div class="article-content markdown-body">
      <h3 id="标题"><a href="#标题" class="headerlink" title="标题"></a>标题</h3><p><code># 文字</code>   代表一级标题   </p>
<p><code>## 文字</code>   代表二级标题   </p>
<p><code>#### 文字</code>   代表三级标题   </p>
<p><code>##### 文字</code>   代表四级标题   </p>
<p><code>###### 文字</code>   代表五级标题   </p>
<a id="more"></a>
<p>详细效果参考如下:</p>
<h1 id="一级标题"><a href="#一级标题" class="headerlink" title="一级标题"></a>一级标题</h1><h2 id="二级标题"><a href="#二级标题" class="headerlink" title="二级标题"></a>二级标题</h2><h3 id="三级标题"><a href="#三级标题" class="headerlink" title="三级标题"></a>三级标题</h3><h4 id="四级标题"><a href="#四级标题" class="headerlink" title="四级标题"></a>四级标题</h4><h5 id="五级标题"><a href="#五级标题" class="headerlink" title="五级标题"></a>五级标题</h5><h6 id="六级标题"><a href="#六级标题" class="headerlink" title="六级标题"></a>六级标题</h6><blockquote>
<p>tip: 没有七级标题哈</p>
</blockquote>
<h3 id="分割线"><a href="#分割线" class="headerlink" title="分割线"></a>分割线</h3><p>使用三个或以上的 - 表示，如</p>
<p><code>---</code> 会生成如下分割线</p>
<hr>
<h3 id="斜体和粗体"><a href="#斜体和粗体" class="headerlink" title="斜体和粗体"></a>斜体和粗体</h3><p>使用 * 和 ** 分别表示斜体和粗体，删除线使用两个 ~ 表示</p>
<p> <code>*斜体*</code> 生成 <em>斜体</em></p>
<p><code>**加粗**</code>  生成 <strong>加粗</strong></p>
<p><code>~~删除~~</code> 生成 <del>删除</del></p>
<h3 id="超链接和图片"><a href="#超链接和图片" class="headerlink" title="超链接和图片"></a>超链接和图片</h3><p>链接和图片的写法类似，图片仅在超链接前多了一个 ! ，一般是  <code>[文字描述] (链接)</code></p>
<ul>
<li><p>超链接语法     <code>[百度一下](http://www.baidu.com)</code>  生成  <a href="'http://www.baidu.com'">百度一下</a>    超链接生成后网页点击后可以自动跳转哦！~</p>
</li>
<li><p>图片语法 图片仅在超链接前多了一个 ! ,如  <code>![图片描述信息](图片地址)</code></p>
<p><img  
                     lazyload
                     src="/images/loading.svg"
                     data-src="http://blog.yuhongshao.cn/_nuxt/img/shao.yuhong-1.472ed57.jpg"
                      alt="我是你男朋友"
                > </p>
</li>
</ul>
<h3 id="无序列表"><a href="#无序列表" class="headerlink" title="无序列表"></a>无序列表</h3><p>使用 -、+ 和 * 都可以表示无序列表，我喜欢用*号,可嵌套，例如</p>
<p><code>* 无序1</code>  将生成如下</p>
<ul>
<li>生成的无序1</li>
<li>生成的无序2</li>
</ul>
<p><code>- 无序2</code> 将生成如下</p>
<ul>
<li>-号生成的无序1</li>
<li>-号生成的无序2</li>
</ul>
<h3 id="有序列表"><a href="#有序列表" class="headerlink" title="有序列表"></a>有序列表</h3><p>这个会更简单，只需要数字+文字</p>
<p><code>1. 有序列表</code>将生成如下</p>
<ol>
<li> 有序</li>
<li>2</li>
<li>3</li>
</ol>
<h3 id="文字引用"><a href="#文字引用" class="headerlink" title="文字引用"></a>文字引用</h3><p>使用 &gt; 表示，可以有多个 &gt;，表示层级更深，例如</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&gt; 1</span><br><span class="line">&gt;</span><br><span class="line">&gt; &gt; 2</span><br><span class="line">&gt; &gt;</span><br><span class="line">&gt; &gt; 3</span><br><span class="line">&gt; &gt;</span><br><span class="line">&gt; &gt; &gt; 4</span><br><span class="line">&gt; &gt; &gt;</span><br><span class="line">&gt; &gt; &gt; 5 </span><br><span class="line">&gt; &gt; &gt;</span><br><span class="line">&gt; &gt; &gt; &gt; 6</span><br><span class="line">&gt; &gt; &gt; &gt;</span><br><span class="line">&gt; &gt; &gt; &gt; </span><br></pre></td></tr></table></figure>
<p>将生成如下效果</p>
<blockquote>
<p>1</p>
<blockquote>
<p>2</p>
<p>3</p>
<blockquote>
<p>4</p>
<p>5 </p>
<blockquote>
<p>6</p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<h3 id="行内代码块"><a href="#行内代码块" class="headerlink" title="行内代码块"></a>行内代码块</h3><p>其实上面已经用过很多次了，即使用 ` 表示，例如  </p>
<p><code>这是效果</code></p>
<h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3><p>直接看例子吧，第二行的 —: 表示了对齐方式，默认左对齐，还有 右对齐 和 居中</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">| 商品 | 数量 |  单价  |</span><br><span class="line">| ---- | ---: | :----: |</span><br><span class="line">| 苹果 |   10 |  \$1   |</span><br><span class="line">| 电脑 |    1 | \$1000 |</span><br></pre></td></tr></table></figure>
<p>将生成如下效果</p>
<table>
<thead>
<tr>
<th>商品</th>
<th align="right">数量</th>
<th align="center">单价</th>
</tr>
</thead>
<tbody><tr>
<td>苹果</td>
<td align="right">10</td>
<td align="center">$1</td>
</tr>
<tr>
<td>电脑</td>
<td align="right">1</td>
<td align="center">$1000</td>
</tr>
</tbody></table>
<blockquote>
<p>tip: 这里不要这么傻哈，可以用typora生成的，这里不需要记</p>
</blockquote>
<h3 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h3><p>看到这，全部都学会了么？<br>学会了的话<br>还有一句情话<br>我爱你，我的乖乖 — 邵<br>这是我的网站   <a class="link"   target="_blank" rel="noopener" href="http://www.yuhongshao.cn/" >http://www.yuhongshao.cn点击链接打开<i class="fas fa-external-link-alt"></i></a></p>

    </div>


    

    
    <div class="post-copyright-info">
      <div class="article-copyright-info-container">
    <ul>
        <li>本文标题：网站开始-markdown语法</li>
        <li>本文作者：李秀涓</li>
        <li>创建时间：2022-05-08 15:40:06</li>
        <li>
            本文链接：/images/logo.jpg2022/05/08/网站开始-markdown语法/
        </li>
        <li>
            版权声明：本博客所有文章除特别声明外，均采用 <a class="license" target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">BY-NC-SA</a> 许可协议。转载请注明出处！
        </li>
    </ul>
</div>

    </div>
    

    
    <div class="article-nav">
      
      <div class="article-prev">
        <a class="prev" rel="prev" href="/2022/05/08/%E7%BD%91%E7%AB%99%E7%AC%AC%E4%B8%80%E6%9D%A1%E8%AE%B0%E5%BD%95/">
          <span class="left arrow-icon flex-center">
            <i class="fas fa-chevron-left"></i>
          </span>
          <span class="title flex-center">
            <span class="post-nav-title-item">网站第一条记录</span>
            <span class="post-nav-item">上一篇</span>
          </span>
        </a>
      </div>
      
      
    </div>
    

    
  </div>
</div>


        
      </div>

    </div>

    <div class="page-main-content-bottom">
      <!--
 * @Description: file content
 * @Author: yuhongshao
 * @Date: 2022-04-11 16:32:40
 * @email: 
 * @LastEditTime: 2022-06-28 16:05:22
-->
<footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2021</span>&nbsp;-&nbsp;
            
            2023&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">李秀涓</a>
        </div>
        
        
       
        <div><a target="_blank" rel="noopener" href="https://beian.miit.gov.cn">渝ICP备2022010533号-2</a></div>
    </div>
</footer>

    </div>
  </div>

  
  <div class="post-tools">
    <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        

        <!-- go comment -->
        
    </ul>
</div>

  </div>
  

  <div class="right-bottom-side-tools">
    <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
    </ul>
</div>

  </div>

  

  <div class="image-viewer-container">
    <img src="">
</div>


  
  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="搜索..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

  

</main>
<script>
  const context = document.querySelector(".markdown-body");
  const articleTitleList = document.querySelector(".article-title-list");
  const mainContent = document.querySelector('.main-content');

  if (context) {
    if (window.innerWidth > 1380) {
      const tags = context.querySelectorAll('*');
      const hTagReg = /^H[1-6]$/;
      let template = '';
      tags.forEach(item => {
        if (hTagReg.test(item.tagName.toUpperCase()) && item.innerText) {
          const tagH = item.tagName.toLowerCase();
          const tagHToUpper = item.tagName.toUpperCase();
          const forHash = item.getAttribute("id");
          //<span class="badge">${tagHToUpper}</span>
          template += `
                  <${tagH}>
                    <a onclick="javascript:void(1)" href="#${forHash}"> ${item.innerText}</a>
                  </${tagH}>  
                `;

        }
      });
      articleTitleList.innerHTML = template;
    }


  }

  (function leftNavPositionChange() {
    const articleTitlePositoinX = (window.innerWidth - mainContent.clientWidth) / 2 - 300;
    articleTitleList.style.left = articleTitlePositoinX + 'px';
    window.onresize = function () {
      leftNavPositionChange();
    };
  })();

</script>

<script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/header-shrink.js"></script><script src="/js/back2top.js"></script><script src="/js/dark-light-toggle.js"></script>


    <script src="/js/local-search.js"></script>



    <script src="/js/code-copy.js"></script>



    <script src="/js/lazyload.js"></script>


<div class="post-scripts">
    
</div>



</body>
</html>
